@import '@/ui/style/mixin.less';

@radius-value: 10px;

@main-w: 1160px;

@page-pt-without-switchnet-tabs: 40px;

/* pt + h + pb*/
@page-header__tabs-h: 30px + 30px + 30px;
@page-header__title-h: 24px;

@page-header-h: @page-header__tabs-h + @page-header__title-h;
@page-header-h-without-tabs: @page-header-h - @page-header__tabs-h;
@page-header-bottom-offset: 20px;

@tools-h: 48px;
@table-mt: 20px;
@table-header-h: 44px;

@sticky-top-height-common: @page-header__title-h + @page-header-bottom-offset +
  @tools-h + @table-mt + @table-header-h;
// value of `@sticky-top-height-without-tabs` is 200px
@sticky-top-height-without-tabs: @page-pt-without-switchnet-tabs +
  @sticky-top-height-common + @page-header-h-without-tabs;
// value of `@sticky-top-height` is 250px
@sticky-top-height: @sticky-top-height-common + @page-header-h;

/* pt + height + pb */
@sticky-footer-textarea: 16px + 16px + 16px;
@sticky-btn-height: 60px;
@sticky-btn-bottom-offset: 40px;
// value of `@sticky-footer-height` is 148px
@sticky-footer-height: @sticky-footer-textarea + @sticky-btn-height +
  @sticky-btn-bottom-offset;

@table-scoller-reserve-w: 4px;
@table-last-cell-pr: @table-scoller-reserve-w;

.revoke-approval-modal {
  .child-has-chromelike-scrollbar();
  .approval-list {
    .chromelike-scrollbar(0);
  }

  .ant-modal-header,
  .ant-modal-content {
    background: var(--r-neutral-bg2, #f2f4f7);
  }
}

.desktop-approvals-manager {
  overflow: hidden;
  height: 100%;
  min-width: @main-w;
  width: @main-w;
  max-width: 1280px;
  // width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &.approvals-manager-desktop {
    min-width: auto;
    width: auto;
    max-width: 1120px;
    padding: 0 20px;
    padding-top: 18px;

    .approvals-manager__table-tools {
      width: auto;
      height: auto;
    }

    .approvals-manager__table-wrapper {
      margin-top: 24px;
    }
    .am-virtual-table {
      border: none;
    }
    .am-virtual-table
      thead.ant-table-thead
      > tr
      > th.am-virtual-table-head-cell {
      background: var(--rb-neutral-bg-3, #f9f9f9);
    }

    .ant-table-container table > thead > tr:first-child th:first-child {
      border-radius: 10px 0 0 10px;
    }
    .ant-table-container table > thead > tr:first-child th:last-child {
      border-radius: 0 10px 10px 0;
    }
    .am-virtual-table
      thead.ant-table-thead
      > tr
      > th.am-virtual-table-head-cell {
      font-size: 13px;
      line-height: 16px;
      font-weight: 500;
      color: var(--r-neutral-foot, #6a7587);
    }
    .am-virtual-table-empty.ant-empty {
      margin-top: 0;
    }
  }

  > .approvals-manager__header {
    flex-shrink: 0;
  }

  > main {
    flex-shrink: 1;
    height: 100%;
  }

  .approvals-manager__header {
    min-height: @page-header-h-without-tabs;
    box-sizing: content-box;
    padding-bottom: @page-header-bottom-offset;
    display: block;
    width: 100%;
    text-align: center;
    width: @main-w;
    margin: 0 auto;
    font-size: 20px;
    font-weight: 500;

    > .tabs {
      height: @page-header__tabs-h;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    > .title {
      height: 100%;
      max-height: @page-header__title-h;
      text-align: center;
      color: var(--r-neutral-title1);
      vertical-align: baseline;
      display: inline-block;
    }
  }

  .approvals-manager__table-tools {
    width: @main-w;
    margin: 0 auto;
    height: @tools-h;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .search-input-wrapper {
      height: @tools-h;
      background-color: var(--r-neutral-card1);
      border-radius: @radius-value;
      overflow: hidden;
      border: 1px solid var(--r-neutral-line);
      transition: ease-in 0.2s border-color;

      .ant-input-affix-wrapper.search-input,
      .ant-input {
        background-color: transparent;
        color: var(--r-neutral-title1);
        &::placeholder {
          color: var(--r-neutral-foot);
        }
      }

      &.is-focusing,
      &:hover {
        border-color: var(--r-blue-default, #7084ff);
        border-width: 1px;
      }
    }

    .search-input {
      height: 100%;
      width: 380px;
      border-width: 0;
      border-color: transparent !important;

      .ant-input::placeholder {
        color: var(--rb-neutral-info, #c5c5cf);
      }
    }

    .search-input .ant-input-prefix {
      margin-right: 6px;
    }
  }

  .approvals-manager__table-wrapper {
    margin-top: @table-mt;
  }

  .am-virtual-table {
    max-width: @main-w;
    margin: 0 auto;

    .ant-spin-nested-loading {
      border-radius: @radius-value;
      overflow: hidden;
    }

    .ant-spin-container.ant-spin-blur::after {
      background-color: var(--r-neutral-bg-1, #fff);
    }

    .ant-table {
      background: transparent;
    }

    &.ant-table-empty .ant-table-container {
      overflow: hidden;
      border-radius: @radius-value;
      background-color: var(--r-neutral-card1);
    }

    .ant-table-header {
      border-radius: @radius-value;
      // background-color: var(--r-neutral-card1);
    }

    .ant-table-header,
    .ant-table-header > table {
      height: @table-header-h;
    }

    thead.ant-table-thead > tr > th.am-virtual-table-head-cell {
      /**
      we need fix the vertical expansion value from <th> element
      */
      padding: 0;

      background-color: transparent;
      font-size: 13px;
      user-select: none;
      border-bottom: transparent;
      background-color: var(--r-neutral-card1);
      background: var(--r-neutral-card1);
      color: var(--r-neutral-title1);

      // override default head cell style
      // &.ant-table-column-has-sorters:hover {
      //   background-color: transparent;
      // }
      // ant-table-column-sort means current sorter
      &.ant-table-column-has-sorters.ant-table-column-sort {
        // background: transparent;

        .ant-table-column-sorters {
          color: var(--r-blue-default, #7084ff);
        }
      }

      &.ant-table-cell-scrollbar:last-child {
        box-shadow: none;
        width: 0;
        // display: none;
      }

      .ant-table-column-sorters {
        padding: 0;
      }

      .ant-table-column-sorters-with-tooltip {
        height: 100%;
        display: flex;
        align-items: center;
      }

      .ant-table-column-sorter-full {
        margin-top: 0;
        position: relative;
        top: -3px;
        margin-left: 2px;
      }

      &.J_contracts_last_column {
        padding-right: 14px;
      }
    }

    thead.ant-table-thead > tr {
      border-radius: @radius-value;
    }

    .ant-table-container:before,
    .ant-table-container:after {
      display: none;
    }

    .am-virtual-grid {
      overflow-y: overlay !important;
      overflow-x: hidden !important;

      .chromelike-scrollbar-v1(@table-scoller-reserve-w);

      .am-virtual-table-cell-inner {
        cursor: pointer;
      }
    }

    .am-virtual-table-cell {
      @table-body-row-gap: 8px;
      @cell-padding-y: @table-body-row-gap;

      background: transparent;
      padding-left: 0;
      padding-right: 0;
      // padding-top: @cell-padding-y;

      .am-virtual-table-cell-inner {
        // border-bottom: 1px solid var(--rb-neutral-bg-4, #ebedf0);
        border: none;
        font-size: 14px;
        line-height: 17px;
        font-weight: 400;
      }

      &.J_selection .am-virtual-table-cell-inner {
        padding-top: 0;
        padding-bottom: 0;
        height: 100%;
      }

      &.is-first-cell > .am-virtual-table-cell-inner {
        border: none;
        // border-left: 1px solid transparent;
        // border-top-left-radius: @radius-value;
        // border-bottom-left-radius: @radius-value;
      }

      &.is-last-cell > .am-virtual-table-cell-inner {
        border: none;
        // border-right: 1px solid transparent;
        // border-top-right-radius: @radius-value;
        // border-bottom-right-radius: @radius-value;

        padding-right: @table-last-cell-pr;
      }

      &.is-sorting-cell > .am-virtual-table-cell-inner {
        // font-weight: 500;
      }

      &.is-hovered-row-cell {
        .am-virtual-table-cell-inner {
          border: none;
          // border-top: 1px solid var(--r-blue-default, #7084ff);
          // border-bottom: 1px solid var(--r-blue-default, #7084ff);
          background: rgba(134, 151, 255, 0.1);
        }

        &.is-first-cell > .am-virtual-table-cell-inner {
          border: none;
          // border-left: 1px solid var(--r-blue-default, #7084ff);
          // border-top-left-radius: @radius-value;
          // border-bottom-left-radius: @radius-value;
        }

        &.is-last-cell > .am-virtual-table-cell-inner {
          border: none;
          // border-right: 1px solid var(--r-blue-default, #7084ff);
          // border-top-right-radius: @radius-value;
          // border-bottom-right-radius: @radius-value;
        }
      }

      &.is-selected-row-cell {
        .am-virtual-table-cell-inner {
          border: none;
          // border-top: 1px solid var(--r-blue-default, #7084ff);
          // border-bottom: 1px solid var(--r-blue-default, #7084ff);
          // background: var(--r-blue-light1, #eef1ff);
          background: rgba(var(--r-blue-default-rgb), 0.04);
        }

        &.is-first-cell > .am-virtual-table-cell-inner {
          border: none;
          // border-left: 1px solid var(--r-blue-default, #7084ff);
          // border-top-left-radius: @radius-value;
          // border-bottom-left-radius: @radius-value;
        }

        &.is-last-cell > .am-virtual-table-cell-inner {
          border: none;
          // border-right: 1px solid var(--r-blue-default, #7084ff);
          // border-top-right-radius: @radius-value;
          // border-bottom-right-radius: @radius-value;
        }
      }
    }

    &:not(.dark)
      .am-virtual-table-cell.is-contract-row__risky
      > .am-virtual-table-cell-inner,
    &:not(.dark)
      .am-virtual-table-cell.is-contract-row__danger
      > .am-virtual-table-cell-inner {
      background: #fefafa;
    }
    &
      .am-virtual-table-cell.is-contract-row__risky
      > .am-virtual-table-cell-inner,
    &
      .am-virtual-table-cell.is-contract-row__danger
      > .am-virtual-table-cell-inner {
      background: #3d3b46;
    }

    &:not(.dark)
      .am-virtual-table-cell.is-contract-row__warning
      > .am-virtual-table-cell-inner {
      background: #fffdf8;
    }
    &.dark
      .am-virtual-table-cell.is-contract-row__warning
      > .am-virtual-table-cell-inner {
      background: #3d3b46;
    }

    &.J_table_by_contracts .am-virtual-table-cell {
      &.is-last-cell > .am-virtual-table-cell-inner {
        padding-right: 20px;
      }

      //------------ special column customizations ------------
      &.column-cell-J_key-contract > .am-virtual-table-cell-inner {
        padding-right: 4px;
      }
    }

    &.J_table_by_assets .am-virtual-table-cell {
      //------------ special column customizations ------------
      &.column-cell-J_key-approveSpender > .am-virtual-table-cell-inner {
        padding-right: 4px;
      }

      &.column-cell-J_key-approveSpender
        > .am-virtual-table-cell-inner
        .name-and-address
        .name {
        max-width: 50px;
      }

      &.column-cell-J_key-assetApproveTime > .am-virtual-table-cell-inner {
        padding-left: 20px;
      }
    }

    .am-virtual-table-cell-inner {
      box-sizing: border-box;
      padding: 16px 0;
      background: var(--r-neutral-card1);
      color: var(--r-neutral-title1);
      height: 100%;
      display: flex;
      align-items: center;
    }

    [data-theme='dark'] .am-virtual-table-cell-inner {
      background: #141414;
    }

    .am-virtual-table-cell-inner .name-and-address {
      &,
      .address,
      .name {
        color: var(--r-neutral-title1);
        font-size: 14px;
        line-height: 17px;
        font-weight: 400;
      }

      .contract-name {
        color: var(--r-neutral-foot);
        font-size: 14px;
        line-height: 17px;
        max-width: 10em;
        .ellipsis();
      }
    }

    .am-virtual-table-cell-inner .token-with-chain + .asset-name {
      max-width: 10em;
      .ellipsis();
    }
  }

  .am-virtual-table-empty {
    @mt-offset: 12px;

    height: 320px + @mt-offset;
    margin: 0;
    margin-top: -@mt-offset;
    width: 100%;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    border-bottom-left-radius: @radius-value;
    border-bottom-right-radius: @radius-value;

    background: transparent;

    &.ant-empty {
      margin-top: @mt-offset;
      background-color: var(--r-neutral-card1);
      border-radius: @radius-value;
    }

    .ant-empty-image {
      height: initial;
      margin-bottom: 10px;

      > img {
        width: 52px;
        height: 52px;
      }
    }

    .ant-empty-description {
      margin-top: 0;
      border-bottom-left-radius: @mt-offset;
      border-bottom-right-radius: @mt-offset;
      color: var(--r-neutral-body);
      text-align: center;
      font-size: 14px;
      font-weight: 400;
    }
  }

  .approvals-manager .alert-with-caret {
    position: relative;

    &:before {
      content: ' ';
      position: absolute;
      top: -16px;
      left: 68px;
      border: 8px solid transparent;
      border-bottom: 12px solid #ec5151;
    }

    &.J_risky_danger &::before {
      border-bottom-color: #ec5151;
    }

    &.J_risky_warning &::before {
      border-bottom-color: @color-orange;
    }
  }

  .J-risk-cell__text {
    position: relative;
    display: inline-block;
    font-weight: 500;

    &::before {
      display: block;
      content: ' ';
      top: 2px;
      left: 0;
      position: absolute;
      width: 100%;
      bottom: 0px;
      border-bottom: 1px dashed transparent;
    }

    &.is-warning {
      color: #ffb020;
      &::before {
        display: block;
        border-bottom-color: #ffb020;
      }
    }
    &.is-danger {
      color: #ec5151;
      &::before {
        display: block;
        border-bottom-color: #ec5151;
      }
    }
  }

  .J-risk-cell__tooltip,
  .J-table__tooltip,
  .J_permit2-tooltip {
    color: #fff;
    font-size: 12px;
    font-weight: 400;

    .ant-tooltip-inner {
      line-height: 18px;
      border-radius: 2px;
      background-color: var(--r-neutral-black);

      p {
        margin-bottom: 0;
      }
    }

    &.tip-column-contract-trust-value .ant-tooltip-inner {
      width: 350px;
    }
  }

  .J_permit2-tooltip .ant-tooltip-content {
    width: 370px;
  }

  .J-modal-item__tooltip.min-width-limit {
    .ant-tooltip-inner {
      word-wrap: normal;
      min-width: 300px;
    }
  }

  .J-risk-cell__tooltip {
    &.tip-trust-value .ant-tooltip-inner {
      line-height: 20px;
      text-align: center;
    }

    &.is-danger.tip-recent-revokes .ant-tooltip-inner {
      min-width: 460px;
    }
    &.is-warning.tip-recent-revokes .ant-tooltip-inner {
      min-width: 460px;
    }
  }

  .J_selected_count_text {
    color: var(--r-blue-default, #7084ff);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
}

.sticky-footer {
  text-align: center;
  position: absolute;
  height: @sticky-footer-height;
  bottom: 0;
  padding-bottom: @sticky-btn-bottom-offset;
}

.sticky-footer-container {
  height: 88px;
  display: flex;
  justify-content: center;
  &.is-sticky {
    .sticky-footer-inner {
      position: fixed;
      bottom: 0;
    }
  }
}

.modal-debug-row-item {
  .child-has-chromelike-scrollbar(6px);
}

.am-revoke-btn.ant-btn-primary[disabled] {
  .light-style-disabled-btn();
}

.contract-approval-item .token-approval-item-desc {
  &,
  .address {
    color: var(--r-neutral-title1);
  }

  .contract-name {
    color: var(--r-neutral-body);
    max-width: 10em;
    .ellipsis();
  }
}

.am-revoke-info-modal {
  .ant-modal-content {
    width: 400px;
    height: 232px;
  }

  .ant-modal-body {
    height: 100%;
    padding-top: 40px;
    padding-bottom: 32px;
    padding-left: 0;
    padding-right: 0;
  }

  .ant-modal-confirm-title {
    padding-left: 20px;
    padding-right: 20px;
  }

  .ant-modal-confirm-content {
    margin-top: 0;
    padding: 16px 20px 40px;
  }

  .ant-modal-confirm-btns {
    padding: 0 40px;
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ant-modal-close-x {
    width: 44px;
    height: 44px;
  }
}
